<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <style lang="scss">
      .upload-box {
        width: 200px;
        height: 200px;
        border: 1px dashed #969595;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        input[type="file"] {
          width: 100%;
          height: 100%;
          opacity: 0;
          display: none;
        }
        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 65px;
          color: #948f8f;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>文件上传</h1>
      <div class="upload-box" ref="uploadBox" id="uploadBox">
        <span>+</span>
        <input
          type="file"
          id="file"
          multiple
          webkitdirectory
          mozdirectory
          odirectory
        />
      </div>

      <table :data="tableData" style="width: 100%">
        <table-column prop="date" label="日期" width="180"> </table-column>
        <table-column prop="name" label="姓名" width="180"> </table-column>
        <table-column prop="address" label="地址"> </table-column>
      </table>

      <pagination layout="prev, pager, next" :total="50"> </pagination>

      <button type="primary">上传</button>
    </div>

    <!-- 独立的 script 标签 -->
    <script>
      const doms = {
        uploadBox: document.getElementById("uploadBox"),
        file: document.getElementById("file"),
      };

      doms.uploadBox.ondragenter = function (e) {
        e.preventDefault();
      };
      doms.uploadBox.ondragover = function (e) {
        e.preventDefault();
      };
      doms.uploadBox.ondrop = function (e) {
        e.preventDefault();
        let items = e.dataTransfer.items;
        for (let i = 0; i < items.length; i++) {
          const entry = !items[i]?.getAsEntry?.()
            ? items[i].webkitGetAsEntry()
            : items[i].getAsEntry();
          console.log(entry);
          if (entry.isDirectory) {
            const reader = entry.createReader();
            reader.readEntries((entries) => {
              console.log(entries);
            });
          } else {
            entry.file((file) => {
              console.log(file);
            });
          }
        }
      };
    </script>
  </body>
</html>
